<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>指纹采集</title>
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
    .fileinput-button {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .fileinput-button input{
        position: absolute;
        height: 100%;
        left: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
    }
</style>
<body>
    <div class="container">
        <h1>指纹采集程序</h1>
    </div>
    <div class="container">
        <div class="row">
            <!--系统设置与图片显示-->
            <div class="col-sm-3">
                <!--指纹图片显示-->
                <img src="images/fingerprint.gif" class="img-thumbnail">

                <!--系统信息-->
                <div class="system-info-box">
                    <div class="box-title">
                        <h3>硬件信息</h3>
                    </div>
                    <div class="box-content">
                        <p>欢迎使用指纹采集程序</p>
                        <p>请先选择设备串口，并打开设备...</p>
                    </div>
                </div>
                <!--串口列表-->
                <div class="input-group">
                    <span class="input-group-addon">串口列表：</span>
                    <select class="form-control" id="portList">
                        <option th:each="portName : ${portsName}" th:text="${portName}" th:value="${portName}"></option>
                    </select>
                </div>
                <div style="margin-top: 20px">
                    <button class="btn btn-primary btn-block" id="openDevice">打开设备</button>
                    <button class="btn btn-primary btn-block" id="closeDevice" disabled>关闭设备</button>
                    <button class="btn btn-success btn-block" id="checkin" disabled>开始签到</button>
                </div>
            </div>
            <!--功能按钮与指纹列表-->
            <div class="col-sm-9">
                <h3 style="margin-top: 0">信息显示</h3>
                <textarea class="form-control" rows="8" id="infoTextArea" style="resize: none; background-color: white" readonly="readonly">欢迎使用&#10;请先打开设备！&#10;</textarea>
                <div class="row">
                    <div class="col-md-6">
                        <h3>指纹录入</h3>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">学号</div>
                                <input type="text" class="form-control" id="studentId" placeholder="请输入学号搜索" autocomplete="off"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" id="searchByStudentId">搜索</button>
                                </span>
                            </div>
                            <small class="text-danger" id="searchTip"></small>
                        </div>

                        <div style="border: #ddd solid 1px; border-radius: 4px;margin-bottom: 10px">
                            <h5 style="border-bottom: #ddd solid 1px; margin: 10px; padding-bottom: 5px">学生信息</h5>
                            <div class="row">
                                <div class="col-xs-8">
                                    <div style="padding: 10px">
                                        <div style="padding-top: 10px; padding-bottom: 10px">姓名：<span class="studentName"><span>-</span></span></div>
                                        <div style="padding-top: 10px; padding-bottom: 10px">学号：<span class="studentId"><span>-</span></span></div>
                                        <div style="padding-top: 10px; padding-bottom: 10px">性别：<span class="studentGender"><span>-</span></span></div>
                                        <div style="padding-top: 10px; padding-bottom: 10px">指纹：<span class="fingerprint"><span>-</span></span></div>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div style="padding: 10px;">
                                        <img src="images/fingerprint-default.jpg" class="img-thumbnail" id="fingerprintImg">
                                    </div>
                                    <div style="padding: 5px; text-align: center">
                                        <span class="btn btn-default fileinput-button">
                                            <span>上传图像</span>
                                            <input type="file" id="uploadImage" accept="bmp"/>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="button-box">
                            <button class="btn btn-primary" id="getImage">指纹采集</button>
                            <button class="btn btn-primary" id="uploadFinger">录入信息</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h3>选择签到</h3>
                        <div class="input-group">
                            <span class="input-group-addon">签到列表：</span>
                            <select class="form-control" id="checkinList">
                            </select>
                        </div>
                        <h3>学生信息</h3>
                        <div style="border: 1px solid #ddd; border-radius: 4px">
                            <table class="table table-hover" id="studentList">
                                <thead>
                                <tr>
                                    <th>#学号</th>
                                    <th>姓名</th>
                                    <th>签到</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- layer.js -->
    <script src="js/layer.js"></script>
    <!-- main.js -->
    <script src="js/main.js"></script>
    <!-- other.js -->
    <script src="js/other.js"></script>

</body>
</html>
